<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语雀</title>
    <script src="lib/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https:////at.alicdn.com/t/font_2161586_j8pprwoblx.css">
</head>
<body>
    <div class="top">
        <div class="body-top">
            <div class="img"></div>
            <div class="input">
                <button></button>
                <input type="text" placeholder="搜索">
            </div>
            <div class="option">
                <span>工作台</span>
                <span>空间</span>
                <span>发现</span>
                <span>帮助</span>
                <span>反馈</span>
            </div>
            <div class="my-functions">
                <p></p>
                <i class="iconfont icon-shijianlishijilujishizhongbiao"></i>
                <i class="iconfont icon-lingdang"></i>
                <div class="portrait">
                    <p></p>
                    <i class="iconfont icon-xiaosanjiao"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="body-left">
            <div class="uesr-imformation">
                <div class="head-icon"></div>
                <p class="name">chengbenchao</p>
                <p>懦夫从未启程，弱者死于途中，而我们在路上。</p>
            </div>
            <button class="uesr-button">关注</button>
            <div class="user-concerned">
                <div class="concerned">
                    <p>关注了</p>
                    <p>8</p>
                </div>
                <div class="line"></div>
                <div class="concerned concerned-right">
                    <p>关注者</p>
                    <p>177</p>
                </div>
            </div>
            <div class="user-list">
                <p><i class="iconfont icon-location"></i><span>武汉</span></p>
                <p><i class="iconfont icon-gongjuxiang"></i><span>web前端工程师</span></p>
            </div>
            <div class="user-team">
                <div class="title">团队</div>
                <div class="blank">
                    <span>尚未加入任何团队</span>
                </div>
            </div>
        </div>
        <div class="body-right">
            <div class="ant-card-head-title">
                <p class="nav get">知识库</p>
                <p class="nav">关注了</p>
                <p class="nav">关注者</p>
            </div>
            <div class="books-subheader">
                <div class="subheader-input">
                    <button></button>
                    <input type="text" placeholder="搜索知识库" spellcheck="true">
                </div>
                <div class="books-subheader-right">
                    <span>类型：所有</span>
                    <i class="iconfont icon-xiasanjiao"></i>
                </div>
            </div>
            <div class="ant-spin-container">
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">小程序</p>
                        <p class="note-ifmt"></p>
                        <p class="note-time">昨天   16:55</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">前端</p>
                        <p class="note-ifmt">html-css-js-wechat学习笔记</p>
                        <p class="note-time">10-23  15:09</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">HTML-CSS</p>
                        <p class="note-ifmt"></p>
                        <p class="note-time">10-21 11:30</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">web配置项</p>
                        <p class="note-ifmt"></p>
                        <p class="note-time">10-16  14:55</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">vue教程</p>
                        <p class="note-ifmt"></p>
                        <p class="note-time">10-03  18:59</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">python</p>
                        <p class="note-ifmt">python教程</p>
                        <p class="note-time">09-30  09:24</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">web基础-html-css-js</p>
                        <p class="note-ifmt">html，css，js学习笔记</p>
                        <p class="note-time">07-30  11:42</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">小技巧</p>
                        <p class="note-ifmt"></p>
                        <p class="note-time">107-27 17:52</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">node.js</p>
                        <p class="note-ifmt">node.js框架</p>
                        <p class="note-time">06-09  15:34</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">webpack教程</p>
                        <p class="note-ifmt"></p>
                        <p class="note-time">05-10  11:04</p>
                    </div>
                </div>
                <div class="ant-list-items">
                    <div class="item-left">
                        <p></p>
                    </div>
                    <div class="item-right">
                        <p class="note-title">极客营学员赠言</p>
                        <p class="note-ifmt">vedio</p>
                        <p class="note-time">05-10  11:04</p>
                    </div>
                </div>
            
            </div>
        </div>
        <div class="foot">
            <div class="body-foot">
                <div class="foot-icon"></div>
                <div class="about-box">
                    <div class="foot-about">
                        <span   class="about-text">关于语雀</span>
                        <span   class="about-text">使用帮助</span>
                        <span   class="about-text">数据安全</span>
                        <span   class="about-text">服务协议</span>
                        <span>丨</span>
                        <span   class="about-text">English</span>
                    </div>
                </div>  
            </div>
        </div>
        <div class="icon"> <i class="iconfont icon-zu"></i></div>
        <div class="icon-top"> <i class="iconfont icon-huidaodingbu"></i></div>
    </div>

    <script>
        $(".nav").click(function(){
            $(this).addClass("get").siblings().removeClass("get")
        })
        $(window).scroll(function(){
                var scrollTop = $(window).scrollTop()
                if(scrollTop>=300){
                    $(".icon-top").css({display:"block"})
                }
                else{
                    $(".icon-top").css({display:"none"})
                }
                console.log(scrollTop)   
            })
            $(".icon-top").click(function(){
                $("html").animate({scrollTop:"0"},1000)
            })
    </script>
</body>
</html>